<template>
	<view class="container">
		<view class="title">
			<view class="titleOne">
				<view class="userImg">
					<image :src="userInfos.headImg" mode="scaleToFill"></image>
				</view>
				<view class="userName">
					<view class="nickName">
						<view class="name">
							{{userInfos.nickName}}
						</view>
						<view class="bancal" @tap.stop="navTo('signIn/index')">
							{{text}}
						</view>
					</view>
					<view class="leavelName">
						{{userInfos.leavelName}}
					</view>
				</view>
			</view>
			<view class="titleTwo">
				<view class="list">
					<view class="number">
						{{userInfos.balance.toFixed(2)}}
					</view>
					<view class="text">
						余额
					</view>
				</view>
				<view class="list" @tap.stop="navTo('signIn/integralFlow')">
					<view class="number">
						{{parseInt(userInfos.integral)}}
					</view>
					<view class="text">
						积分
					</view>
				</view>
				<view class="list">
					<view class="number">
						{{parseInt(userInfos.couponCount)}}
					</view>
					<view class="text">
						优惠券
					</view>
				</view>
			</view>
		</view>
		<view class="orderCancel">
			<view class="orderMy">
				<view class="orderAll">
					我的订单
				</view>
				<view class="orderMore" @tap.stop="navTo('../order/index?status=99')">
					查看全部订单<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="orderList">
				<view class="list" v-for="(item,index) in orderList" @tap.stop="navTo(item.url)">
					<view class="image">
						<image :src="item.imgUrl" mode="scaleToFill"></image>
					</view>
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="interests">
			<view class="orderMy">
				<view class="orderAll">
					服务工具
				</view>
			</view>
			<view class="interestsList" v-for="(item,index) in interestsList" @tap.stop="navTo(item.url)">
				<view class="image">
					<image :src="item.imgUrl" mode="scaleToFill"></image>
				</view>
				<view class="name">
					{{item.title}}
				</view>
			</view>
			<view class="interestsList" @tap.stop="signOut">
				<view class="image">
					<image src="../../static/user/signout.png" mode="scaleToFill"></image>
				</view>
				<view class="name">
					退出登录
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data() {
			return {
				userInfos: {
					nickName: '--',
					leavelName: '--',
					headImg: '-',
					balance: 0,
					integral: 0,
					couponCount: 0
				},
				orderList: [{
						title: '待付款',
						imgUrl: '../../static/user/orderPayment.png',
						url: '../order/index?status=0'
					},
					{
						title: '待发货',
						imgUrl: '../../static/user/orderGoods.png',
						url: '../order/index?status=1'
					},
					{
						title: '待收货',
						imgUrl: '../../static/user/orderReceiving.png',
						url: '../order/index?status=2'
					},
					{
						title: '待评价',
						imgUrl: '../../static/user/orderEvaluate.png',
						url: '../order/index?status=3'
					},
					{
						title: '已完成',
						imgUrl: '../../static/user/orderComplete.png',
						url: '../order/index?status=6'
					}
				],
				interestsList: [{
						title: '会员中心',
						imgUrl: '../../static/user/member.png',
						url: 'material'
					},
					{
						title: '我的钱包',
						imgUrl: '../../static/user/wallet.png',
						url: 'moneyCard/moneyCard'
					},
					{
						title: '我的收藏',
						imgUrl: '../../static/user/collection.png',
						url: 'collection/index'
					},
					{
						title: '我的权益',
						imgUrl: '../../static/user/interests.png',
						url: ''
					},
					{
						title: '地址管理',
						imgUrl: '../../static/user/address.png',
						url: 'address/address'
					},
					{
						title: '邀请好友',
						imgUrl: '../../static/user/please.png',
						url: 'invite_user/index'
					},
					{
						title: '关于我们',
						imgUrl: '../../static/user/aboutWe.png',
						url: 'aboutWe/index'
					}
				],
				loadNum:0,
				text: '签到拿积分'
			}
		},
		onShow() {
			this.againRequest();
		},
		methods: {
			async againRequest(){
				let userinfos = uni.getStorageSync('userInfos');
				if(userinfos){
					this.userInfos = userinfos;
					let res = await api.uniCloudApi(api.publicFun.user,{_id:userinfos._id,user_type:2});
					let sign = await api.uniCloudApi(api.publicFun.sign_in_user,{_id:userinfos._id,type: 0});
					console.log(sign)
					if(sign.msg){
						this.text = '今日已签到'
					}
					this.userInfos = res[0];
					uni.setStorageSync('userInfos',res[0])
				}else {
					this.showModals()
				}
			},
			signOut(){
				let that = this;
				uni.showModal({
					content:'是否退出登录?',
					cancelText:'不了',
					confirmText:'确定',
					success(e) {
						if(e.confirm){
							uni.clearStorage();
							setTimeout(()=>{
								uni.navigateTo({
									url: '../public/login'
								})
							},500)
						}
					}
				})
			},
			// 通用路由跳转
			navTo(url){
				const userinfo = uni.getStorageSync('userInfos');
				if(!userinfo){
					this.showModals()
					return
				}
				uni.navigateTo({
					url:url
				})
			},
			showModals(){
				uni.showModal({
					confirmText: '去登录',
					cancelText: '再等等',
					content: '系统检测到您未登录，是否去登录',
					success(e) {
						if (e.confirm) {
							uni.navigateTo({
								url: '../public/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.container {
		width: 100%;

		.title {
			width: 100%;
			height: 300rpx;
			background-color: $uni-back-color;

			.titleOne {
				width: 95%;
				margin-left: 2.5%;
				display: flex;

				.userImg {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					background-color: #FFFFFF;
					margin: 0 50rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 60rpx;
					}
				}

				.userName {
					width: calc(100% - 220rpx);
					height: 120rpx;

					view {
						height: 60rpx;
						line-height: 60rpx;
					}

					.nickName {
						color: #FFFFFF;
						font-size: 28rpx;
						width: 100%;
						display: flex;

						.name {
							width: 60%;
						}

						.bancal {
							width: 30%;
							background-color: #8A6DE9;
							text-align: center;
							font-size: 22rpx;
							height: 48rpx;
							line-height: 48rpx;
							margin-top: 10rpx;
							border-radius: 24rpx;
						}
					}

					.leavelName {
						color: #FFFFFF;
						width: 30%;
						text-align: center;
						background-color: #FFB400;
						border-radius: 30rpx;
					}
				}
			}

			.titleTwo {
				margin-top: 30rpx;
				width: 100%;
				display: flex;

				view {
					width: 33%;
					height: 180rpx;
				}

				.list {
					width: 100%;
					height: 130rpx;

					.number {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #FFFFFF;
					}

					.text {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #F1F1F1;
					}
					
				}
			}
		}

		.orderCancel {
			width: 95%;
			margin-left: 2.5%;
			margin-top: 30rpx;
			height: 240rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;

			.orderMy {
				width: 96%;
				margin: 10rpx 2%;
				display: flex;
				height: 70rpx;
				border-bottom: 1px solid #F1F1F1;

				.orderAll,
				.orderMore {
					line-height: 70rpx;
					width: 50%;
				}

				.orderMore {
					text-align: right;
					font-size: 25rpx;
					color: #999999;

					.icon-youjiantou {
						font-size: 22rpx;
					}
				}
			}

			.orderList {
				width: 96%;
				margin: 0 2%;
				display: flex;
				height: 230rpx;

				.list {
					width: 20%;

					.image {
						width: 100%;
						height: 100rpx;
						text-align: center;

						image {
							margin-top: 15rpx;
							width: 80rpx;
							height: 80rpx;
						}

						.imageUrl {
							margin-top: 0;
							width: 100rpx;
							height: 100rpx;
						}
					}

					.title {
						text-align: center;
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #FFFFFF;
						
						&:active{
							color: #999999;
						}
					}
				}
			}
		}

		.interests {
			width: 95%;
			margin-left: 2.5%;
			margin-top: 40rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;

			.orderMy {
				width: 96%;
				margin: 10rpx 2%;
				display: flex;
				height: 70rpx;
				border-bottom: 1px solid #F1F1F1;

				.orderAll {
					line-height: 70rpx;
					width: 50%;
				}
			}

			.interestsList {
				width: 25%;
				text-align: center;
				float: left;

				.image {
					width: 100%;
					height: 90rpx;

					image {
						margin-top: 10rpx;
						width: 80rpx;
						height: 80rpx;
					}
				}
				.name{
					&:active{
						color: #999999;
					}
				}
			}
		}
	}
</style>
